<template>
	<view>
		<navbar title="我的收藏"></navbar>
		<view class="goods-box" v-if="list.length > 0">
			<view class="goods-list flex" v-for="(item, index) in list" :key="index" @click="utils.navTo('/pages/cate/goods_detail', {id: item.productVo.productId})">
				<image class="image" :src="item.productVo.mainImg" mode=""></image>
				<view class="flex1">
					<view class="name ell2">{{item.productVo.name}}</view>
					<view class="price-box fa jcsb">
						<view class="price">￥{{item.productVo.price}}</view>
						<view class="gobuy">去购买</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata-box" v-if="nodata">
			<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
			<view class="nodata-prompt">暂无商品~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				count: 0,
				list: [],
				nodata: 0
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if(this.list.length < this.count) {
				this.page++
				this.getList()
			}
		},
		methods: {
			getList() {
				this.api.collectListFunc({
					pageNum: this.page
				}).then(res => {
					if(res.code == 200) {
						this.count = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
						this.nodata = this.list.length > 0 ? 0 : 1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-box{
		padding: 4rpx 0 20rpx;
		.goods-list{
			margin-top: 16rpx;
			padding: 20rpx;
			background-color: #fff;
			.image{
				margin-right: 16rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
			.name{
				margin-top: 4rpx;
				height: 80rpx;
			}
			.price-box{
				margin-top: 16rpx;
				color: #FE3134;
				.price{
					font-size: 32rpx;
					font-weight: bold;
				}
				.gobuy{
					padding: 0 38rpx;
					height: 52rpx;
					line-height: 52rpx;
					border: 1rpx solid #FE3134;
					border-radius: 26rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
